.about {
  padding-top: 60px;

  .title {
    @include flex(center, row);
    align-items: center;
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('../assets/virus-img.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    height: 442px;
    color: white;
    width: 100%;
    // max-width: 1440px;
    margin: auto;
    h1 {
      font-size: 2.2rem;
    }
  }
  .cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 1440px;
    margin: auto;
    margin-top: 2%;
    margin-bottom: 2%;
    .card {
      padding: 1% 2%;
      width: 30%;
      color: white;
      margin-bottom: 2%;
      @media #{$tablet} {
        width: 100%;
        margin-left: 5%;
        margin-right: 5%;
      }
    }
  }
  @media #{$mobile} {
    .title {
      height: 310px;
    }
    .cards {
      @include flex(flex-start, row);
      .card {
        padding: 2% 3%;
        width: 100%;
        margin-top: 5%;
        margin-left: 5%;
        margin-right: 5%;
      }
    }
  }
  @media #{$tablet} {
    .title {
      height: 372px;
      margin-bottom: -6%;
    }
  }

  .hero {
    

    @media #{$tablet} {
      padding-bottom: 6%;
    }
  }
}
